<template>
	<view>
		<view class="demo">
			<view class="demo_tops">
				<view class="demos_zuo" @click="returns">
					<span class="icon-return"></span>
				</view>
					<p style="height: 5vw;font-size: 4vw;line-height: 10vw;margin-left: 30vw;">钱包</p>
			</view>
			<view class="pays">
				<view class="top">
					<view class="top_zuo">
						<p style="margin-top: 3vw;">钱包余额(元)</p>
						<h3 style="">25.00</h3>
					</view>
					<view class="top_you">
					<button style="width: 15vw; height: 7vw; font-size: 3vw;color: aliceblue;background-color: #2884c5;margin-top: 5vw;margin-left: 9vw;" @click="mony">充值</button>
					</view>
				</view>
				<view class="btn">
					<view class="btn_zuo">
						<p style="margin-top: 3vw;">可用金额(元)</p>
						<h3 style="">25.00</h3>
					</view>
					<view class="btn_zuo">
						<p style="margin-top: 3vw;">冻结金额(元)</p>
						<h3 style="">25.00</h3>
					</view>
				</view>
			</view>
			<view class="chong">
				<view class="chong_zuo">
					<span class="icon-recharge" style="margin-left: 5vw;font-size: 3.5vw;"></span>
					<span style="margin-left: 3vw;">充值记录</span>
				</view>
				<view class="chong_you">
					<span class="icon-right" style="font-size: 5vw;color: #ccc;"></span>
				</view>
			</view>
			<view class="chong">
				<view class="chong_zuo">
					<span class="icon-3" style="margin-left: 5vw;font-size: 3.5vw;"></span>
					<span style="margin-left: 3vw;">资金流水</span>
				</view>
				<view class="chong_you">
					<span class="icon-right" style="font-size: 5vw;color: #ccc;"></span>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			returns(){
			uni.navigateBack()
			},
			mony(){
				uni.navigateTo({
					url:"/pages/money/money"
				})
			}
		}
	}
</script>
<style type="text/css">
  @import url("../../static/icon2/style.css");
</style>
<style>
	.demo{
		width: 100vw;
		height: 100vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.pays{
		margin-top: 5vw;
		width: 90%;
		height: 40vw;
		border-radius: 5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to top, #00c6fb 0%, #005bea 100%);
	}
	.demo_tops{
				width: 100%;
				height: 10vw;
				display: flex;
			}
			.demos_zuo{
				width: 15vw;
				height: 100%;
				text-align: center;
				line-height: 10vw;
				font-size: 4vw;
			}
	.top{
		width: 90%;
		height: 20vw;
		display: flex;
		
		border-bottom: 1px solid #ccc;
	}
	.top_zuo{
		width: 70%;
		height: 100%;
		color: #dfedfb;
	}
	.top_you{
		width: 30%;
		height: 100%;
	}
	.btn{
		width: 90%;
		height: 15vw;
		display: flex;
		
	}
	.btn_zuo{
		width: 50%;
		height: 100%;
		color: #dfedfb;
	}
	.chong{
		width: 90%;
		height: 13vw;
		background-color: #ffffff;
		border-radius: 3vw;
		margin-top: 5vw;
		display: flex;
	}
	.chong_zuo{
		width: 90%;
		height: 100%;
		line-height: 13vw;
		font-size: 4vw;
	}
	.chong_you{
		width: 10%;
		height: 100%;
		line-height: 13vw;
	}
</style>
